Vue.component('tab-nav',{
    template:`
    <div class="tab-nav">
            <ul class="nav-list">
                <li v-bind:class="{active:linum==1}" v-on:click="$emit('tabgo',1)">
                    <p>推荐列表</p>
                    <div style="height: 2px;">
                            <transition name="fade">
                                <div class="hengxian" v-if="linum==1"></div>
                            </transition>
                    </div>
                </li>
                <li v-bind:class="{active:linum==2}" v-on:click="$emit('tabgo',2)">
                    <p>热歌榜</p>
                    <div style="height: 2px;">
                            <transition name="fade">
                                <div class="hengxian" v-if="linum==2"></div>
                            </transition>
                    </div>
                </li>
                <li v-bind:class="{active:linum==3}" v-on:click="$emit('tabgo',3)">
                    <p>搜索</p>
                    <div style="height: 2px;">
                        <transition name="fade">
                            <div class="hengxian" v-if="linum==3"></div>
                        </transition>
                    </div>
                </li>
            </ul>
    </div>
    `,
    data(){
        return{
            
        }
    },
    props:['linum']
})